<template>
  <view class="card">
    <uni-swipe-action>
      <view class="box" v-for="(item,index) in dayList" :key="index">
        <view class="header">
          <text>{{item.date}} {{item.week}}</text>
          <text>收入：{{income(item)}}</text>
          <text>支出：{{expend(item)}}</text>
        </view>
        <block v-for="(e,i) in item.array" :key="e.id">
          <uni-swipe-action-item :right-options="options" @click="handleHuadong($event,{id:e.id,...item})">
            <view class="content">
              <view class="line">
                <view class="icon">
                  <view :class="`t-icon t-icon-${e.icon}`"></view>
                </view>
                <text>{{e.name}}</text>
                <text>{{e.value}}</text>
              </view>
              <text class="money" v-if="e.type==1">+{{e.money}}</text>
              <text class="money" v-else>-{{e.money}}</text>
            </view>
          </uni-swipe-action-item>
        </block>
      </view>
    </uni-swipe-action>
  </view>
</template>

<script>
  export default {
    name: "expendcard",
    props: ['dayList', 'year', 'month'],
    computed: {
      // 每天收入
      income() {
        return function(item) {
          return this.suan(item, 1)
        }
      },
      // 每天支出
      expend() {
        return function(item) {
          return this.suan(item, 0)
        }
      },
    },
    mounted() {

    },
    methods: {
      // 触发滑动后的点击
      handleHuadong(e, tally) {
        // console.log(tally);
        let index = tally.array.findIndex((v, i) => {
          return v.id == tally.id
        })
        if (index != -1) {
          // console.log({date:this.year+'-'+tally.date,...tally.array[index]});
          if(e.index==0){
            // console.log("?");
            uni.setStorageSync('tally',{date:this.year+'-'+tally.date,...tally.array[index]})
            uni.navigateTo({
              url:'/pages/tally/index',
            })
          }else if(e.index==1){
            this.$store.dispatch('delTally',{id:tally.id,year:this.year,month:this.month})
          }
        }

      },
      /* 
        item 每天的支出收入对象||每月支出收入的数组
        num 1|0 收入|支出 
      */
      suan(item, num = 1) {
        let arr = []
        let newarr = []
        // 检测是否为数组
        if (Array.isArray(item)) {
          // 是数组就使用map循环返回一个月的支出|收入的二维数组
          arr = item.map(e => {
            return e.array
          })
          // 数组扁平化 变为一维数组
          arr = arr.flat(Infinity)
        } else {
          // 不是数组 将每天的的 支出|收入 的对象数组赋值 
          arr = item.array
        }
        // 把每天的 收入|支出 的钱放在一个数组
        newarr = arr.map(item => {
          if (item.type && num == 1) {
            return item.money
          } else if (!item.type && num == 0) {
            return item.money
          } else {
            return 0
          }
        })
        // 返回 支出|收入 汇总数据
        let money = newarr.reduce((pre, cur) => {
          pre = parseFloat(pre) + parseFloat(cur)
          return pre
        }, 0)
        return money.toFixed(2)
      },
      monthMoney() {
        // 每月支出汇总
        let eMoney = this.suan(this.dayList, 0)
        // 每月收入汇总
        let iMoney = this.suan(this.dayList)
        this.$emit("monthMoney", eMoney, iMoney)
      },
    },
    watch: {
      dayList(v, l) {
        this.monthMoney()
      }
    },
    data() {
      return {
        options: [{
          text: '修改',
          style: {
            backgroundColor: '#ffc800'
          }
        }, {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }]
      }
    }
  }
</script>

<style scoped lang="scss">
  .card {
    margin-top: 10px;
    // padding: 0 20rpx;
    .box {
      margin-bottom: 35rpx;

      .header {
        padding: 0 20rpx 10rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;

        text {
          font-size: 14px;
          color: #fff;
        }
      }

      .content {
        padding: 10rpx 20rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .line {
          margin: 8px 0;
          display: flex;
          flex: 3;
          // justify-content: space-between;
          align-items: center;

          .icon {
            // width: 20px;
            // height: 20px;
            margin-right: 10px;
            padding: 5px;
            border-radius: 50%;
            border: 1px #555 solid;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          text {
            margin-right: 10px;
          }
        }

        .money {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
</style>
